<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./js/vue.js"></script>
    <title>Document</title>
    <style>
        body {
            margin-bottom: 800px;
        }

        .fc {
            color: brown;
        }

        .fc1 {
            color: blue;
        }

        .fs {
            font-size: 26px;
        }

        .bc {
            background-color: #cccccc;
        }

        .border {
            border: 1px solid brown;
        }
        .success{
            color: green;
        }
        .error{
            color: red;
        }
    </style>

</head>
<body>
    <div id="app" v-cloak>
        <p v-bind:id="str">绑定属性ID</p>
        <p :id = "str">绑定属性ID</p>
        <input type="button" value="修改str" @click=" str='新字符串' ">
        <!-- 自定义属性 -->
        <p a:itany=" '网博' ">自定义属性</p>
        <p :data-name="str">自定义属性</p>
        <p :dataName="str">自定义属性</p>
        <!-- 
            boolean 类型属性 绑定的数据会被v-bind完成类型转换，转为boolean
            v-bind 重写了类型转换规则 - 转换为了真是开发的数据描述规则
            v-bind 的 boolean 转换使用的是否有值的描述规则
         -->
        <input type="text">
        <input type="text" disabled>
        <hr>
        <input type="text" :disabled="flag">
        <input type="button" value="修改flag" @click="flag = !flag">
        <hr>
        <input type="text" :disabled=" '' " value="空字符">
        <input type="text" :disabled=" 'asd' " value="非空字符">
        <input type="text" :disabled=" 0 " value = "0">
        <input type="text" :disabled=" 1 " value =" 非零 ">
        <input type="text" :disabled=" null " value=" null ">
        <input type="text" :disabled=" undefined " value="undefined">
        <!-- 
            class 样式属性
            v-bind :class="string|Array|Object"
                string=字符串以标准的 HTML class取值方式定义
                Array=以JS数组中每个元素描述该标签具有样式
                Object=以JS对象中元素的 key描述样式名，value描述样式状态
                    value 取值为 boolean 类型，true 表示key样式需要加载，false表示不需要加载
         -->
        <p class="fc fs bc border">html 的class定义</p>
        <p :class="classStr">html的class定义-string</p>
        <input type="button" value="添加边框" @click="classStr=classStr+' border '">
        <p :class=" num>100?'fc':'fc1' ">html的class定义</p>
        <hr>
        <p :class="classArray">html的class定义-array</p>
        <input type="button" value="添加边框" @click=" classArray.push('border') ">
        <input type="button" value="删除字体大小" @click="removeFs()"> 
        <p :style=" [styleObj1,styleObj] ">html行内样式-Array</p>
        <hr>    
        <!-- 
            v-bind 对于属性 class 和 style 绑定是采用是在原值上进行操作，不是覆盖
         -->
        <p class="fc fs bc" :class="num>100?'border':'' ">样式</p>
        <p style="font-size: 30px" :style=" 'color:'+color ">样式</p>
        <input type="color" @change=" color=$event.target.value ">
        <!-- 
            ** 在HTML和JS规范中，标签存在两种属性
            在HTML标签上直接定义属性叫作 HTML属性（标签属性） 
            通过JS获取标签创建的DOM对象 所携带的属性叫做 DOM属性
            w3c 在规范中将 部分 HTML属性和DOM属性完成了映射对应
            id=>id style=>style class=className

            v-bind 指令 可以完成标签属性的绑定也可完成DOM属性的绑定
         -->
        <hr>
    </div>
</body>
<script>
    new Vue ({
        el:"#app",
        data:{
            str:"测试属性绑定",
            flag:false,
            classStr:"fc fs bc",
            num:99,
            classArray:["fc", "fs", "bc"],
            classObj:{
                success:false,
                error:false
            },
            msg:"",
            styleStr:"color:red;font-size:20px;",
            styleObj1:{
                border:"1px solid black"
            },
            styleObj:{
                color:"red",
                fontSize:"20px"
            },
            color:"red"
        },
        methods: {
            removeFs(){
                let i = this.classArray.indexOf("fs");
                this.classArray.splice(i,1);
            },
        },
    })
</script>
</html>